<template>
  <div>
    <div>
    <div id="strategylist">
      <div style="height: 60px;display: flex;flex-direction: row;align-items:center;justify-content:space-between;width: 75%;">
        <div style="display: flex;flex-direction: row;justify-content:flex-start;align-item:center;">
          <div style="font-size: 18px;color:#00192f;align-self: flex-end;margin-right: 20px;">策略列表</div>
          <input type="button" @click="addStratey = 1" class="btn btn-primary" value="新建策略"/>
        </div>
        <div>
          <span class="glyphicon glyphicon-search"></span>
          <input type="text"  placeholder="策略名称" class="form-control" v-model="keyword" id="search" @change="search" />
        </div>
      </div>

      <div class="segmentation"></div>
      <div style="color: #6e747a;padding: 20px;padding-left: 8px;width: 75%;">全部文件</div>
      <table id="strategyTable" class="table table-hover pointer" style="width: 75%;">
        <thead>
          <tr>
            <td style="width:15px"><input type="checkbox" id="checkAll" @change="checkAll($event)"></td>
            <td width="30%">策略名称</td>
            <td width="10%" align="center">分类</td>
            <td width="30%" align="center">最近更新时间</td>
            <td width="20%" align="center">操作</td>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in StrategyList" :key="item.id">
            <td style="width:15px"><input v-model="checkData" type="checkbox" :value="item.id" class="checkbox" @change="check($event)"></td>
            <td class="contentmore" @click="strategydetail(item.id)">
              <img style="width: 20px;height: 20px;" src="../../../static/image/03.png" />
              <span>{{item.strategyname}}</span>
            </td>
            <td align="center">
              <img style="width: 50px;height: 25px;" src="../../../static/image/code.png" />
            </td>
            <td align="center">{{item.createtime}}</td>
            <td align="center">
              <i class="iconfont icon-zhexiantutongji" @click="strategydetail(item.id)"></i>
              <i class="iconfont icon-delete" @click.prevent="strategyDelete(item.id)"></i>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="page" style="margin:12px 12px 20px 0px;">
        <Pagination :Current.sync="Current" :limit="limit" :totalCount="totalCount" @turn="search"></Pagination>
      </div>
    </div>
    </div>
    <!-- 新建 -->
    <div>
      <div class="newstrategy">
        <el-dialog title="新建策略" width="600px" :visible.sync="addStratey" style="border-radius: 4px;" center>
          <div style="display:flex;justify-content:center;flex-direction:column">
          <!-- <div style="width:540px;height: 1px;background-color: #32c5d2;margin-bottom:20px;"></div> -->
          <el-form :model="form">
            <el-form-item label="策略名" label-width="160px">
              <el-input v-model="form.strategyname" placeholder="请输入策略名称" clearable></el-input>
            </el-form-item>
          </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" style="background-color:#3C7EEE;width:120px;border:none;" @click="addStratey = false;newStrateylist()">确 定</el-button>
            <el-button @click="addStratey = false" style="background-color:#cccccc;color:#ffffff;width:120px;">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<style scoped>
.newstrategy >>> .el-input__inner {
  width: 250px;
}
.iconfont{
  font-size: 25px;
}
.iconfont:hover{
  color:#007bff;
}

#strategylist {
  padding-top: 100px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.segmentation {
  width: 75%;
  height: 2px;
  border-top: solid 1px #e8ecf0;
}
.btn{
    display: inline-block;
    margin-left: 20px;
    margin-top: 3px;
    padding: 6px 20px;
    border-radius: 4px;
    background-color: #3C7EEE;
    color: #fff;
    cursor: pointer;
}
.glyphicon-trash {
  margin-right: 5px;
}
.glyphicon-pencil {
  margin-left: 5px;
}

a:hover {
  text-decoration: none;
}

#edittext {
  background-color: rgba(255, 255, 255, 0.7);
  width: 400px;
  height: 320px;
  border-radius: 8px;
  position: relative;
  left: 36%;
}

.edit h4 {
  position: absolute;
  margin: 8px;
  margin-top: 12px;
  margin-bottom: 6px;
  margin-left: 50px;
}

#edittext input {
  margin: 8px;
  margin-left: 50px;
}

#edittext h5 {
  margin: 8px;
  margin-top: 6px;
  margin-bottom: 6px;
}
#edittext textarea {
  margin: 8px;
}
.segmentationedit {
  position: absolute;
  width: 400px;
  height: 2px;
  border-top: solid 2px #a9a9a9;
  margin-bottom: 8px;
  padding-top: 8px;
  padding-bottom: 10px;
}
#btn {
  margin: 8px;
  float: right;
  position: absolute;
  height: 40px;
  width: 400px;
  margin-top: 8px;
  text-align: center;
}
.form-control {
  width: 200px;
  display: inline;
  border: solid 1px #e8ecf0;
}
.text_active {
  color: #337ab7;
}

/*搜索框*/
.glyphicon-search {
  width: 35px;
  height: 35px;
  padding-top: 10px;
  text-align: center;
  margin-bottom: 3px;
  color: #e8ecf0;
}

.glyphicon-trash {
  color: #337ab7;
}
.glyphicon-pencil {
  color: #337ab7;
}
.contentmore{
  cursor: pointer;
}
.contentmore:hover{
  color: #337ab7;
  text-decoration:underline;
}
</style>
<script>
import moment from "moment"
import Pagination  from './../zujian/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      addStratey: false,
      keyword: '',
      StrategyList:'',
      Current: 1,
      limit: 10,
      totalCount: 100,
      form:{
        strategyname:''
      },
      checkData: []
    };
  },
  mounted () {
    this.search()
  },
  methods: {
    checkAll (e) { // 点击全选事件函数
      var checkObj = document.querySelectorAll('.checkbox') // 获取所有checkbox项
      console.log(checkObj)
      if (e.target.checked) { // 判定全选checkbox的勾选状态
        for (var i = 0; i < checkObj.length; i++) {
          if (!checkObj[i].checked) { // 将未勾选的checkbox选项push到绑定数组中
            this.checkData.push(checkObj[i].value)
          }
        }
      } else { // 如果是去掉全选则清空checkbox选项绑定数组
        this.checkData = []
      }
    },
    check (e) {
      // if (e.target.checked) { // 判定checkbox的勾选状态
      //   this.num1++
      // } else {
      //   this.num1--
      // }
    },
    strategydetail(id){
      localStorage.setItem('strategyId',id)
      this.$router.push('/strategy_create')
    },
    search () {
      console.log(this.keyword)
      let SessionToken = localStorage.getItem('SessionToken')
      if(this.keyword === ''){
        this.$http.post('inquireByName?sessionToken='+SessionToken+'&keyword=&pageIndex='+this.Current+'&pageSize='+this.limit+'').then((resp) => {
          if (resp.data.status === 200) {
            console.log(resp.data)
            this.totalCount = resp.data.data.total
            this.StrategyList = resp.data.data.list
            for(let i = 0;i<this.StrategyList.length;i++){
                this.StrategyList[i].createtime = moment(new Date(parseInt(this.StrategyList[i].createtime))).format("YYYY-MM-DD hh:mm:ss")
                this.StrategyList[i].uploadtime = moment(new Date(parseInt(this.StrategyList[i].uploadtime))).format("YYYY-MM-DD hh:mm:ss")
            }
            console
          } else {
            this.$message(resp.data.msg)
          }
        })
      } else{
        this.$http.post('inquireByName?sessionToken='+SessionToken+'&keyword='+this.keyword+'&pageIndex='+this.Current+'&pageSize='+this.limit+'').then((resp) => {
          if (resp.data.status === 200) {
            console.log(resp.data)
            this.totalCount = resp.data.data.total
            this.StrategyList = resp.data.data.list
            for(let i = 0;i<this.StrategyList.length;i++){
                this.StrategyList[i].createtime = moment(new Date(parseInt(this.StrategyList[i].createtime))).format("YYYY-MM-DD hh:mm:ss")
                this.StrategyList[i].uploadtime = moment(new Date(parseInt(this.StrategyList[i].uploadtime))).format("YYYY-MM-DD hh:mm:ss")
            }
            console
          } else {
            this.$message(resp.data.msg)
          }
        })
      }
      
    },
    //策略删除
    strategyDelete(id) {
      console.log(id)
      let SessionToken = localStorage.getItem('SessionToken')
      this.$http.post('deleteStrategy?sessionToken='+SessionToken+'&strategyId='+id+'').then((resp) => {
        if (resp.data.status === 200) {
          this.$message('删除成功')
          this.search()
        } else {
          this.$message(resp.data.msg)
        }
      })
    },

    //策略显示
    // showstrategylist() {
    //   let SessionToken = localStorage.getItem('SessionToken')
    //   let id = localStorage.getItem('Userid')
    //   console.log(SessionToken,id)
    //   if(SessionToken !== null && id !== null){
    //     this.$http.post('getUserAllStrategy?sessionToken='+SessionToken+'&userId='+id+'&pageIndex='+this.Current+'&pageSize='+this.limit+'').then((resp) => {
    //       if (resp.data.status === 200) {
    //         this.totalCount = resp.data.data.total
    //         this.StrategyList = resp.data.data.list
    //         for(let i = 0;i<this.StrategyList.length;i++){
    //           this.StrategyList[i].createtime = moment(new Date(parseInt(this.StrategyList[i].createtime))).format("YYYY-MM-DD hh:mm:ss")
    //           this.StrategyList[i].uploadtime = moment(new Date(parseInt(this.StrategyList[i].uploadtime))).format("YYYY-MM-DD hh:mm:ss")
    //         }
    //       } else {
    //         this.$message(resp.data.msg)
    //       }
    //     })
    //   } else{
    //     this.$message('您目前没有权限查看！')
    //     this.$router.push('/login')
    //   }
    // },
    //新建策略
    newStrateylist() {
      let SessionToken = localStorage.getItem('SessionToken')
      let id = localStorage.getItem('Userid')
      this.$http.post('newStrategy?sessionToken='+SessionToken+'&userId='+id+'&newStrategyName='+this.form.strategyname+'').then((resp) => {
        if (resp.data.status === 200) {
          this.$message.success('添加成功')
          this.search()
          let obj = new Object()
          obj.strategyId = resp.data.data
          obj.javaFile = '\npublic class RunStrategy extends RootStrategy {\n\n    //策略初始化\n    public void init() {\n\n    }\n\n    //不在交易日\n    public void notOnTradingDay() {\n\n    }\n    //开盘前运行\n    public void beforeTheOpen() {\n\n    }\n\n    //交易期\n    public void trading() {\n\n    }\n\n    //中午休息运行\n    public void runAtNoon() {\n\n    }\n\n    //已收盘\n    public void afterTheClose() {\n\n    }\n}\n'
          let param = JSON.stringify(obj)
          this.$http.post('updateStrategy?sessionToken='+SessionToken+'',param,{headers:{'Content-Type':'application/json'}}).then((resp) => {
            if (resp.data.status === 200) {
              console.log(resp)
              // this.$message.success(resp.data.message)
            } else {
              console.log(resp)
              this.$message.error(resp.data.message)
            }
          })
        } else {
          this.$message(resp.data.msg)
        }
      })
      // this.content = value
      
    }
  }
};
</script>